<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>封装ajax_Promise</title>
	</head>
	<body>
		<!-- 
				定义一个sendAjax函数，对xhr的GET请求进行封装：
						1.该函数接收1个配置对象，其中包含两个属性：
									url(请求地址)、data(参数)
						2.该函数返回一个Promise实例
									靠Promise实例表达：请求的成功与失败，以及具体的数据
		-->
		<script type="text/javascript" >
			function sendAjax(options){
				return new Promise((resolve,reject)=>{
					//获取请求相关的参数
					const {url,data} = options
					//创建xhr
					const xhr = new XMLHttpRequest()
					//绑定监听
					xhr.onreadystatechange = ()=>{
						if(xhr.readyState === 4 ){
							if(xhr.status >= 200 && xhr.status <= 299) resolve(xhr.response)
							else reject(xhr.response)
						}
					}
					//自动解析json
					xhr.responseType = 'json'
					let str = ''
					for (let key in data){
						str += `${key}=${data[key]}&`
					}
					str = str.slice(0,-1)
					//配置请求信息
					xhr.open('GET',url+'?'+str)
					//发送请求
					xhr.send()
				})
			}

			const result = sendAjax({
				url:'https://api.apiopen.top/getJoke',
				data:{count:30,type:'video'}
			})

			result.then(
				value =>{console.log('请求成功了',value)},
				reason=>{console.log('请求失败了',reason)}
			)
			
			
		</script>
	</body>
</html>